<template>
	<cl-select-table
		v-model="value"
		:title="t('选择用户优惠券')"
		:service="service.coupon.user"
		:columns="columns"
		:multiple="multiple"
		:dict="{ text: 'couponname' }"
		pickerType="text"
	/>
</template>

<script setup lang="ts">
defineOptions({
	name: "coupon-user-select",
});

import { useCool } from "/@/cool";
import { useI18n } from "vue-i18n";
import { CrudProps } from "/#/crud";
import { reactive, ref, useModel } from "vue";

const props = defineProps({
	...CrudProps,
	modelValue: null,
	multiple: Boolean,
});

const { service } = useCool();
const { t } = useI18n();

const value = useModel(props, "modelValue");

// 选项
const options = reactive({
	couponType: [
		{ label: t("满减券"), value: 0 },
		{ label: t("折扣券"), value: 1 },
		{ label: t("随机券"), value: 2 },
	],
	status: [
		{ label: t("未使用"), value: 0 },
		{ label: t("已使用"), value: 1 },
		{ label: t("已过期"), value: 2 },
	],
});

const columns = ref([
	{
		label: t("头像"),
		prop: "userAvatar",
		minWidth: 100,
		component: { name: "cl-image", props: { size: 60 } },
	},
	{ label: t("昵称"), prop: "userName", minWidth: 140 },
	{
		label: t("使用门槛金额"),
		prop: "thresholdAmount",
		minWidth: 140,
		sortable: "custom",
	},
	{
		label: t("折扣比例"),
		prop: "discountRatio",
		minWidth: 140,
		sortable: "custom",
	},
	{
		label: t("优惠金额"),
		prop: "discountAmount",
		minWidth: 140,
		sortable: "custom",
	},
	{
		label: t("类型"),
		prop: "couponType",
		minWidth: 120,
		dict: options.couponType,
	},
	{ label: t("名称"), prop: "couponName", minWidth: 140 },
	{ label: t("优惠券ID"), prop: "couponId", minWidth: 140 },
	{
		label: t("领取时间"),
		prop: "receiveTime",
		minWidth: 170,
		sortable: "custom",
		component: { name: "cl-date-text" },
	},
	{
		label: t("使用状态"),
		prop: "status",
		minWidth: 100,
		component: { name: "cl-switch" },
		dict: options.status,
	},
	{
		label: t("使用时间"),
		prop: "useTime",
		minWidth: 170,
		sortable: "custom",
		component: { name: "cl-date-text" },
	},
	{ label: t("订单编号"), prop: "orderNo", minWidth: 140 },
]);
</script>
